<template>
    <!-- 计数器 -->
    <div class="input-num">
      <!-- 点击按钮实现减法操作，当减到0后就禁止点击操作 -->
      <button @click="muit"
      :disabled="num<=0? true : false"
      :class="num<=0? 'disabled' : ''"
      >
        -
      </button>
      <!-- 显示当前点击操作对应显示的数据 -->
      <span>{{ num }}</span>
      <!-- 点击按钮实现加法操作，当加到10后就禁止点击操作 -->
      <button @click="add"
      :disabled="num>=10? true : false"
      :class="num>=10? 'disabled' : ''"
      >
        +
      </button>
    </div>
</template>

<script setup>
import { ref } from "vue";
// 数字显示
const num = ref(6)
// 点击+1
const add = () => {
    num.value++
}
// 点击-1
const muit = () => {
    num.value--
}

</script>

<style lang="scss" scoped>
    .input-num {
      width: 180px;
      height: 40px;
      margin: 50px auto;
      border: 1px solid gray;
      display: flex;
      border-radius: 5px;
      overflow: hidden;
    }

    .input-num button {
      width: 50px;
      height: 100%;
      font-size: 25px;
      color: gray;
      cursor: pointer;
    }

    .input-num button:hover {
      color: red;
    }

    .input-num span {
      height: 100%;
      border: 1px solid gray;
      flex: 1;
      text-align: center;
      line-height: 40px;
    }

    .input-num button.disabled {
      cursor: not-allowed;
      color: #ccc;
    }
</style>